React JS में CSS कैसे Add करें? (External, Inline & Modules Guide in Hindi)

react.js में css को कई तरीकों से add किया जा सकता है – Inline CSS, Internal CSS, External CSS ये तरीक़े वही हैं जो की HTML में इस्तेमाल किए जाते हैं लेकिन लिखने का तरीका थोड़ा चेंज है जिसके बारे में आज के आर्टिकल में detail से बताया गया है |

आज के आर्टिकल को शुरू से लेकर अंत तक अगर आप पढ़ते हैं तो आपके सभी सवालों के जवाब मिल जाएँगे |

Table of Contents

React js Kya hai?

react.js एक open-source JavaScript library है जिसको Meta(facebook) और open-source community maintain के द्वारा maintain किया जाता है, इसका उपयोग UI और ख़ासकर single-page applications (SPA) बनाने के लिए किया जाता है |

React में UI को तोड़कर reusable components में बाँटा जाता है, जिससे application को develop करना और maintain करना काफ़ी आसान होता है |

React में Inline CSS कैसे करें?

जैसे की ऊपर आपने पढ़ा है की react एक JavaScript library है और इसमें हम jsx लिखते हैं जिसमें javascript और html को एक साथ लिखा जा सकता है तो jsx में किसी element पर inline css करने के लिए javascript object pass करना होता है और 2 word वाली प्रॉपर्टी में camelcase का इस्तेमाल किया जाता है जैसे की नीचे example में लिखा गया है |

<h1 style={{ color: 'orange', fontSize: '30px' }}>Hello Web</h1>

React में Internal CSS कैसे करें?

Internal CSS करने के लिए आपको अपने function के अंदर एक object बनाना होगा और इस object का कोड आपको function के अंदर और return से पहले लिखना होगा बाद में इस object के variable को style के object में pass करना होगा तब जाके आपकी Internal CSS work करती है, इसका एक आसान example नीचे लिखा गया है |

function App() {
  // Internal CSS Object
  const headingStyle = {
    color: "black",
    backgroundColor: "#ccc",
    padding: "20px",
    fontSize: "30px"
  };

  return (
    <div>
      <h1 style={headingStyle}>Internal CSS Example</h1>
    </div>
  );
}

Adding External CSS in React.js: A Step-by-Step Guide (Hindi)

Inline, Internal और external ये सब CSS के type होते हैं |

External CSS को अपने react project में add करने के लिए कुछ स्टेप हैं जिनको फ़ॉलो करना ज़रूरी है |

सबसे पहले CSS की फाइल बनाए अपने react project की directory में
CSS फाइल में CSS का कोड लिखें
React फाइल में import करें

CSS फाइल बनाएँ

सबसे पहले अपने react js के project में जायें और फिर src फोल्डर में जायें जिसके अंदर अपनी नयी CSS की फाइल बनाएँ और ध्यान रहे कि उसका extension .css ज़रूर हो |

CSS फाइल में कोड लिखें

जैसे ही आप CSS की फाइल बनाएँ तो उस फाइल में अपनी CSS का कोड लिखें जिस भी तरह की स्टाइल आप करना चाहते हैं उसके अनुसार |

.content{
    color: red;
    text-align: center;
}
body{
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Adding External CSS in React.js: A Step-by-Step Guide (Hindi)

React फाइल में import करें

जैसे ही आप CSS का कोड लिखते हैं तो उसके बाद आपको इस फाइल को App.js में import करना होता है क्योंकि अगर आप import नहीं करते हैं तो आपके CSS फाइल में लिखा गया कोड काम नहीं करेगा |

तो इसके लिए आप अपने src > App.js में जाएँ और अपनी CSS फाइल को import करें कुछ इस तरह से |

import './App.css';
import './custom-style.css';

function App() {
  return (
    <>
      <div className="content">
        <h2>This is a Heading</h2>
      </div>
      </>
  );
}
export default App;

दोस्तों जैसे ही आप CSS फाइल को import करते हैं और इसको save करते हैं तो आपको ब्राउज़र में बदलाव देखने को मिल जाएँगे |

external CSS या JS फाइल को देखने के लिए आप source code का भी इस्तेमाल कर सकते हैं जैसे कि आप किसी पेज के अगर source code में जाते हैं तो आपको वो सभी फाइल देखने को मिल जायेंगी जो उस पेज में link हैं तो उसमें से आप अपनी फाइल पर click करके चेक कर सकते हैं कि आपकी फाइल लिंक हुई है या नहीं |

Conclusion

आज के आर्टिकल Adding External CSS in React.js: A Step-by-Step Guide (Hindi) में आपने पढ़ा की कैसे आप External CSS को add कर सकते हैं अपने React.js के प्रोजेक्ट में |

यह तरीक़ा HTML से थोड़ा अलग होता है इसलिए आज के आर्टिकल में दिये गये steps को ध्यान से follow ज़रूर करें |

React JS me CSS kaise add kare / Adding CSS in React JS in Hindi